<template>
  <a-row :gutter="10">
    <a-col :md="8" :sm="24">
      <a-card :bordered="false">
        <!-- 按钮操作区域 -->
        <a-row style="margin-left: 14px">
          <a-button @click="handleAdd" type="primary">添加部门</a-button>
        </a-row>
        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
          <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
          <!-- 树-->
          <template v-if="userIdentity === '2'">
            <template v-if="departTree && departTree.length">
              <!--组织机构-->
              <a-tree
                :selectedKeys="selectedKeys"
                @select="onSelect"
                :treeData="departTree"
                :expandedKeys="iExpandedKeys"
                @expand="onExpand"
              />
            </template>
            <div style="margin-top: 24px;" v-else>
              <h3><span>您的部门下暂无有效部门信息</span></h3>
            </div>
          </template>
          <div style="margin-top: 24px;" v-else><h3>普通员工暂无此权限</h3></div>
        </div>
      </a-card>
    </a-col>
    <a-col :md="16" :sm="24">
      <a-card :bordered="false">
        <a-tabs defaultActiveKey="2">
          <a-tab-pane tab="基本信息" key="1" forceRender>
            <Dept-Base-Info ref="DeptBaseInfo" v-if="currSelected.id" @ok="handleOk"></Dept-Base-Info>
            <a-empty v-else style="padding: 24px;">
              <span slot="description"> 请先选择一个部门! </span>
            </a-empty>
          </a-tab-pane>
          <a-tab-pane tab="用户信息" key="2">
            <Dept-User-Info ref="DeptUserInfo" v-if="currSelected.id"></Dept-User-Info>
            <a-empty v-else style="padding: 24px;">
              <span slot="description"> 请先选择一个部门! </span>
            </a-empty>
          </a-tab-pane>
          <!-- <a-tab-pane tab="部门角色" key="3" forceRender>
            <dept-role-info ref="DeptRoleInfo" v-if="currSelected.id"/>
            <a-empty v-else style="padding: 24px;">
              <span slot="description"> 请先选择一个部门! </span>
            </a-empty>
          </a-tab-pane> -->
        </a-tabs>
      </a-card>
    </a-col>
    <depart-modal ref="departModal" @ok="loadTree"></depart-modal>
  </a-row>
</template>
<script>
  import DeptBaseInfo from './modules/DeptBaseInfo'
  import DeptUserInfo from './modules/DeptUserInfo'
  import { queryMyDepartTreeList, searchByKeywords } from '@/api/api'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  // import DeptRoleInfo from './modules/DeptRoleInfo'
  import DepartModal from '@/views/system/modules/DepartModal'

  export default {
    name: 'DepartUserList',
    mixins: [JeecgListMixin],
    components: {
      // DeptRoleInfo,
      DeptBaseInfo,
      DeptUserInfo,
      DepartModal
    },
    data() {
      return {
        iExpandedKeys: [],
        departTree: [],
        selectedKeys: [],
        currSelected: {},
        userIdentity:"",
        url: {
          deleteBatch: '/sys/sysDepart/deleteBatch',
        },
        disableMixinCreated: true,
        selectedChildrenNode: []
      }
    },
    methods: {
      loadTree() {
        var that = this
        that.departTree = []
        that.iExpandedKeys = []
        queryMyDepartTreeList().then((res) => {
          if (res.success && res.result ) {
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.departTree.push(temp)
              that.setThisExpandedKeys(temp)
            }
          }
          that.userIdentity = res.message
        })
      },
      setThisExpandedKeys(node) {
        //只展开一级目录
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)
        }
      },
      onExpand(expandedKeys) {
        this.iExpandedKeys = expandedKeys
      },
      onSearch(value) {
        let that = this
        if (value) {
          // myDeptSearch:'1' 部门
          searchByKeywords({keyWord: value, myDeptSearch:'1'}).then((res) => {
            if (res.success) {
              that.departTree = []
              for (let i = 0; i < res.result.length; i++) {
                let temp = res.result[i]
                that.departTree.push(temp)
              }
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {
          that.loadTree()
        }
      },
      onSelect(selectedKeys, e) {
        let record = e.node.dataRef;
        this.currSelected = Object.assign({}, record)
        this.selectedKeys = [record.key]
        //添加部门校验重复性
        if(record && record.children){
          this.selectedChildrenNode = [];
          this.handleTreeNodeValue(record.children);
        }
        this.$nextTick(() => {
          this.$refs.DeptBaseInfo.open(record);
          this.$refs.DeptUserInfo.onClearSelected();
          this.$refs.DeptUserInfo.open(record);
          // this.$refs.DeptRoleInfo.onClearSelected();
          // this.$refs.DeptRoleInfo.open(record);
        })
      },
      handleTreeNodeValue(result){
        for (let i of result) {
          this.selectedChildrenNode.push(i.title)
          if (i.children && i.children.length > 0) {
            this.handleTreeNodeValue(i.children)
          }
        }
      },
      handleAdd() {
        let key = this.currSelected.key
        if (!key) {
          this.$message.warning('请先点击选中上级部门！')
          return false
        }
        this.$refs.departModal.add(this.selectedKeys,this.selectedChildrenNode)
        this.$refs.departModal.title = '新增'
      },
      handleOk(){
        this.loadTree()
      }
    },
    mounted(){
      this.loadTree()
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>
<style scoped>
.ant-btn {
  margin-left: 3px
}
</style>